<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二级联动菜单</title>
    <script>
        function loadCity() {
            // 获取两个下拉列节点
            let province = document.getElementById("province");
            let city = document.getElementById("city");

            // 定义一个数组
            let arr = new Array();
            // 该数组中的每一个元素对应省份下拉列中的一个选项
            arr[0] = [new Option("--城市--", -1)];
            arr[1] = [new Option("--城市--", -1), new Option("南京", 1), new Option("苏州", 2), new Option("泰州", 3), new Option("常州", 4), new Option("徐州", 5), new Option("无锡", 6), new Option("扬州", 7), new Option("连云港", 8)];
            arr[2] = [new Option("--城市--", -1), new Option("合肥", 1), new Option("滁州", 2), new Option("马鞍山", 3), new Option("蚌埠", 4), new Option("六安", 5), new Option("宿州", 6)];
            arr[3] = [new Option("--城市--", -1), new Option("杭州", 1), new Option("宁波", 2), new Option("绍兴", 3), new Option("温州", 4), new Option("金华", 5), new Option("丽水", 6), new Option("嘉兴", 7)];

            // 获取用户所选择的省份选项的索引号
            let index = province.selectedIndex;

            // 清空城市下拉列中原有的所有数据
            city.length = 0;

            // 将数组中对应下标的元素赋值给城市下拉列
            for (let i = 0; i < arr[index].length; i++) {
                city[city.length] = arr[index][i];
            }
        }
    </script>
</head>
<body>
<select id="province" onchange="loadCity()">
    <option value="-1">--省份--</option>
    <option value="1">江苏省</option>
    <option value="2">安徽省</option>
    <option value="3">浙江省</option>
</select>

<!--
    城市下拉列的内容是根据用户在省份下拉列中所选择的内容生成的
    当省份为江苏时
        城市为:南京、苏州、泰州、常州、徐州、无锡、扬州、连云港
    当省份为安徽时
        城市为:合肥、滁州、马鞍山、蚌埠、六安、宿州
    当省份为浙江是
        城市为:杭州、宁波、绍兴、温州、金华、丽水、嘉兴
-->
<select id="city">
    <option value="-1">--城市--</option>
</select>
</body>
</html>